<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:t="http://www.w3.org/1999/xhtml">
<head th:replace="components/easyui/easyui-list :: head('订单管理','easyui')">
<body>
<div id="tb">
    <div class="datagrid-toolbar" style="padding-bottom: 6px">
        账单分类: <t:dict class="easyui-combobox" id="search_billType" name="billType" dict-name="bill_type"  style="width:160px" allow-empty="true"></t:dict>
        账单状态: <t:dict class="easyui-combobox" id="search_billStatus" name="billStatus" dict-name="bill_status"  style="width:160px" allow-empty="true"></t:dict>
        用户id: <input class="easyui-numberbox" style="width: 160px" id="search_userId" name="userId" data-options="required:false, min:0">
        用户名(昵称): <input class="easyui-textbox" style="width: 160px" id="search_username" name="username" data-options="required:false">
        <a href="javascript:void(0)" class="easyui-linkbutton c-primary" style="width:80px" onclick="doSearch()"><i class="fa fa-search" aria-hidden="true"></i> <span th:text="#{search}"></span></a>
        <a href="javascript:void(0)" class="easyui-linkbutton c-basic" style="width:80px" onclick="doSearchReset()"><i class="fa fa-repeat" aria-hidden="true"></i> <span th:text="#{reset}"></span></a>
    </div>
</div>
<table id="tt" data-options="url:'/api/bills/easyui/list',method:'get',animate: true,rownumbers:true,fit:true,toolbar: '#tb', pagination: true,idField:'id', singleSelect: true, selectOnCheck: true, checkOnSelect: true">
    <thead>
    <tr>
        <th data-options="field:'ck',checkbox:true"></th>
        <!--<th data-options="field:'id',width:160,sortable:true,align:'center'">id</th>-->
        <th data-options="field:'createDate', width:160, sortable:true, align:'center'">创建日期</th>
        <th data-options="field:'billType',width:120,sortable:true,align:'center',formatter:formatBillType">账单分类</th>
        <th data-options="field:'billStatus',width:120,sortable:true,align:'center',formatter:formatBillStatus">账单状态</th>
        <th data-options="field:'paymentType', width:100, sortable:true, align:'center', formatter:formatPaymentType">支付方式</th>
        <th data-options="field:'outTradeNo',width:140,sortable:true,align:'center'">商户订单号</th>
        <th data-options="field:'userId',width:160,sortable:true,align:'center'">用户id</th>
        <th data-options="field:'username',width:120,sortable:true,align:'center'">用户名(昵称)</th>
        <th data-options="field:'billContext',width:200,sortable:true,align:'center'">账单名称</th>
        <th data-options="field:'billDesc',width:200,sortable:true,align:'center'">账单描述</th>
        <th data-options="field:'quantity',width:100,sortable:true,align:'center'">商品数量</th>
    </tr>
    </thead>
</table>
<div th:replace="components/easyui/easyui-list :: js('easyui')"></div>
<script th:inline="javascript">

    function doSearch() {
        $('#tt').datagrid('load', {
            billType: $('#search_billType').val(),
            billStatus: $('#search_billStatus').val(),
            userId: $('#search_userId').val(),
            username: $('#search_username').val()
        });
    }

    function doSearchReset() {
        $('#search_billType').combobox('select', '');
        $('#search_billStatus').combobox('select', '');
        $('#search_userId').numberbox('setValue', '');
        $('#search_username').textbox('setValue', '');
        doSearch();
    }

    function formatBillType(val, row){
        let billTypeArray = [[${billType}]];
        for(let i = 0; i < billTypeArray.length; i++){
            if(val == billTypeArray[i].typeCode){
                return billTypeArray[i].typeName;
            }
        }
        return val;
    }

    function formatBillStatus(val, row){
        let billStatusArray = [[${billStatus}]];
        for(let i = 0; i < billStatusArray.length; i++){
            if(val == billStatusArray[i].typeCode){
                return billStatusArray[i].typeName;
            }
        }
        return val;
    }

    function formatPaymentType(val, row){

        let paymentTypeArray = [[${paymentType}]];
        for(let i = 0; i < paymentTypeArray.length; i++){
            if(val == paymentTypeArray[i].typeCode){
                return paymentTypeArray[i].typeName;
            }
        }
        return val;
    }
</script>
</body>
</html>